<template>
	<view class="content">
		<fr-loading></fr-loading>
		<!--part01-->
		<view class="uni-title uni-common-mt">
			<view class="headpic text">
				<view class="uni-flex uni-column" style="justify-content:center;">
					<view class="flex-item flex-item-V"><image :src="src" lazy-load="true" mode="widthFix" @error="imageError" style="width:200upx;height:200upx"></image></view>
					<!-- <view class="flex-item flex-item-V">
						<view style="color:#000;">纳思.品致</view>
					</view> -->
				</view>
			</view>
		</view>
		<!--part02-->
		<view class="uni-padding-wrap">
			<!-- <button  open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">使用微信授权登录</button> -->
			<button size="mini" class="mini-btn" plain="true" @tap="doback">我在想想</button>
			<button size="mini" class="mini-btn" plain="true" open-type="getUserInfo" @getuserinfo="loginobj" :loading="btnload">微信登录</button>
			
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			article: null,
			src: '/static/logo.png',
			btnload:false
		};
	},
	computed: {
		...mapState(['hasLogin', 'userinfo', 'ismember'])
	},
	onLoad(opt) {
		uni.setNavigationBarTitle({
			title: '登录授权'
		});
		let that = this;
		//console.log(this.ismember)
	},
	methods: {
		imageError: function(e) {
			console.error('image发生error事件，携带值为' + e.detail.errMsg);
		},
		mpGetUserInfo: function(result) {
			console.log('mpGetUserInfo', result);
			if (result.detail.errMsg !== 'getUserInfo:ok') {
				uni.showModal({
					title: '获取用户信息失败',
					content: '错误原因' + result.detail.errMsg,
					showCancel: false
				});
				return;
			}
			this.loginobj();
			// 				console.log(JSON.stringify(result.detail.userInfo))
			// 				this.$store.commit("login","weixin",result.detail.userInfo);
			// 				this.userinfo = result.detail.userInfo;
			// 				this.userInfo = result.detail.userInfo;
		},
		// getPhoneNumber(e) {
		// 	let that = this;
		// 	console.log(e.detail.errMsg)
		// 	console.log(e.detail.iv)
		// 	console.log(e.detail.encryptedData)
		// 	uni.login({
		// 		provider: 'weixin',
		// 		success: function(loginRes) {
		// 			console.log(loginRes.code);
		// 			//换取用户信息
		// 			// 获取用户信息
		// 			uni.getUserInfo({
		// 				provider: 'weixin',
		// 				success: function(infoRes) {
		// 					console.log(infoRes.rawData);
		// 					that.$api.msg('授权成功');
		// 					that.$store.commit("login", JSON.parse(infoRes.rawData));
		// 					setTimeout(function() {
		// 						//数据
		// 						uni.navigateBack()
		// 					}, 500)
		// 				}
		// 			});
		// 		}
		// 	});
		// },
		loginobj: async function() {
			let that = this;
			let url = this.$store.state.base_url;
			let ctx = this.$store;
			let code = '';
			that.btnload = true
			ctx.commit('switch_loading', '1');
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					code = loginRes.code;
					//换取用户信息
					// 获取用户信息
					
					uni.getUserInfo({
						provider: 'weixin',
						success: function(infoRes) {
							/* 
								return; */
								// let param = {
								// 		"id": 2,
								// 		"method": "wxMiniLogin",
								// 		"params": {
								// 			"code": code,
								// 			"signature": infoRes.signature,
								// 			"encryptedData": infoRes.encryptedData,
								// 			"iv": infoRes.iv
								// 		}
								// 	}
								// console.log(JSON.stringify(param))
								// return;
								uni.request({
									url: url,
									method: 'POST',
									data: {
										"id": 2,
										"method": "wxMiniLogin",
										"params": {
											"code": code,
											"signature": infoRes.signature,
											"encryptedData": infoRes.encryptedData,
											"iv": infoRes.iv
										}
									},
									success(res) {
										console.log(JSON.stringify(res))
										if (res.data.result.status == 'success') {

											that.$store.commit("login", res.data.result.data);
											that.$store.commit("setMember");
											setTimeout(() => {
												//数据
												uni.navigateBack()
											}, 1000)
										} else if (res.data.result.status == 'none') {
											that.$store.commit("login", that.userinfo);
											//判断是否为会员										
											uni.redirectTo({
												url: '/pages/phonenum/phonenum'
											})
										} else {
											uni.showToast({
												title: res.data.result.data.message,
												duration: 3000,
												mask: true,
												icon: 'none'
											})
										}
									},
									fail() {
										uni.showToast({
											title: "网络不可用，请稍后在试。",
											duration: 3000,
											mask: true,
											icon: 'none'
										})
									},
									complete() {
										setTimeout(()=>{
											ctx.commit("switch_loading", "0")
										},1000)
									}
								})
							},
							fail(e) {
								uni.showModal({
									title: '提示',
									content: '拒绝授权会影响您正常使用。',
									confirmColor: '#000000',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											setTimeout(() => {
												//数据
												uni.navigateBack()
											}, 1000)
										}
									}
								});
							}
						});
					},
					fail(e) {
					},
					complete() {
						setTimeout(()=>{
							that.btnload = false
							ctx.commit("switch_loading", "0")
						},1000)
					}
				});
			},
			doback(){
				uni.navigateBack({
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding-bottom: 0;
		height: calc(100%);
		background: #fff;
	}

	.uni-padding-wrap {
		padding: 10px;
		margin: 0 auto;
		display: flex;
		button{
			display: inline-flex;
			width:35%;
			height:60upx;
			justify-content: center;
			line-height: 60upx;
			border:1px solid #0092DF;
			color:#0092DF;
		}
		button:after{
			display: none;
			border:1px solid #0092DF;
			color:#0092DF;
		}
	}

	.uni-title {
		height: 480upx;
	}

	.headpic {
		width: 100%;
		flex: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.picsrc {
		width: 200upx;
		height: 200upx;
	}

	.flex-item {
		width: 100%;
	}

	.uni-common-mt {
		margin-top: 0rpx;
		background: #fff;

	}
	.mini-btn{
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}

</style>
